<template>
  <s-layout title="会员中心" class="memberVip">
    <view class="bg">
      <view class="header">
        <view class="picTxt flex middle">
          <view class="pictrue">
            <image :src="userInfo.avatar"></image>
          </view>
          <view class="text flex middle">
            <view class="name line1">{{ userInfo.nickname }}</view>
            <view class="vip" v-if="userInfo.vip">
              <image :src="userInfo.vipIcon"></image>{{ userInfo.vipName }}
            </view>
          </view>
        </view>
      </view>
      <view class="experience">
        <view class="title">当前经验值</view>
        <view class="num">{{ levelInfo }}</view>
        <view class="axis">
          <view class="bar">
            <view class="barCon">
              <view class="solidBar" :style="'width: ' + widthLen + '%;'"></view>
            </view>
            <view class="flex around middle">
              <view
                class="spotw flex center"
                v-for="(item, index) in state.levelList"
                :key="index"
              >
                <view
                  class="spot"
                  :class="
                    state.current > item.experience
                      ? 'past'
                      : '' + ' ' + state.current == item.experience
                      ? 'on'
                      : ''
                  "
                >
                </view>
              </view>
            </view>
          </view>
          <view class="numList flex middle around">
            <view
              class="item"
              :class="current >= item.experience ? 'past' : ''"
              v-for="(item, index) in state.levelList"
              :key="index"
              >{{ item.experience }}</view
            >
          </view>
        </view>
        <view class="vipList flex ">
          <view class="item">
            <view class="pictrue">
              <image src="~@/static/vip01.png"></image>
            </view>
            <view class="name">会员折扣</view>
          </view>
          <view class="item">
            <view class="pictrue">
              <image src="~@/static/vip02.png"></image>
            </view>
            <view class="name">专属徽章</view>
          </view>
          <view class="item">
            <view class="pictrue">
              <image src="~@/static/vip03.png"></image>
            </view>
            <view class="name">会员升级</view>
          </view>
          <view class="item">
            <view class="pictrue">
              <image src="~@/static/vip04.png"></image>
            </view>
            <view class="name">经验积累</view>
          </view>
          <view class="item">
            <view class="pictrue">
              <image src="~@/static/vip05.png"></image>
            </view>
            <view class="name">更多特权</view>
          </view>
        </view>
      </view>
      <view class="module">
        <view class="public_title flex middle"> <view class="icons"></view>获取经验 </view>
        <view class="gainList">
          <view class="item flex between middle wrap">
            <view class="picTxt flex middle">
              <view class="pictrue"><text class="iconfont icon-qiandao2"></text></view>
              <view class="text">
                <view class="name line1">签到</view>
                <view class="info line1">每日签到可获得经验值</view>
              </view>
            </view>
            <navigator url="/pages/app/sign" class="button" hover-class="none"
              >去获取</navigator
            >
          </view>
          <view class="item flex between middle wrap">
            <view class="picTxt flex middle">
              <view class="pictrue on"><text class="iconfont icon-shangpin"></text></view>
              <view class="text">
                <view class="name line1">购买商品</view>
                <view class="info line1">购买商品可获得对应是经验值</view>
              </view>
            </view>
            <navigator
              url="/pages/index/category"
              class="button"
              hover-class="none"
              open-type="switchTab"
              >去获取</navigator
            >
          </view>
          <!-- <view class="item acea-row row-between-wrapper">
						<view class="picTxt acea-row row-middle">
							<view class="pictrue on2"><text class="iconfont icon-yaoqing"></text></view>
							<view class="text">
								<view class="name line1">邀请好友</view>
								<view class="info line1">邀请好友注册商城可获得经验值</view>
							</view>
						</view>
						<navigator url="/pages/users/user_spread_code/index" class="button" hover-class="none">去获取</navigator>
					</view> -->
        </view>
      </view>
    </view>
    <view class="detailed" v-if="state.pagination.data.length">
      <view class="public_title flex middle"> <view class="icons"></view>经验值明细 </view>
      <view class="list">
        <view
          class="item aflex between middle wrap"
          v-for="(item, index) in state.pagination.data"
          :key="index"
        >
          <view class="text">
            <view class="name">{{ item.title }}</view>
            <view class="data">{{ item.add_time }}</view>
          </view>
          <view class="num" v-if="item.pm">+{{ item.number }}</view>
          <view class="num on" v-else>-{{ item.number }}</view>
        </view>
      </view>
    </view>
    <!-- 加载更多 -->
    <uni-load-more
      v-if="state.pagination.total > 0"
      :status="state.loadStatus"
      :content-text="{
        contentdown: '上拉加载更多',
      }"
      @tap="loadmore"
    />
  </s-layout>
</template>

<script setup>
  import { getlevelInfo, getlevelExpList } from '@/mall/api/user.js';
  import { computed, ref, reactive, onBeforeMount, unref } from 'vue';
  import { onLoad, onReachBottom } from '@dcloudio/uni-app';
    import mall from '@/mall';
    import _ from 'lodash';
  const userInfo = computed(() => mall.$store('user').userInfo);
    const pagination = {
    data: [],
    current_page: 1,
    total: 1,
    last_page: 1,
  };
  const state = reactive({
    levelList: '',
     pagination: {
      data: [],
      current_page: 1,
      total: 1,
      last_page: 1,
    },
  });
  onLoad(async (options) => {
    getInfo();
    getlevelList();
  });
  async function getInfo() {
    let { data } = await getlevelInfo();
    state.levelList = data;
    let list = [];
    data.forEach((item) => {
      if (item.experience <= userInfo.value.experience) {
        list.push(item.experience);
      }
    });
    let maxn = Math.max.apply(null, list);
    state.current = maxn;
    let levelListLen = data[list.length] ? data[list.length] : data[list.length - 1];
    let divisor = levelListLen.experience - maxn ? levelListLen.experience - maxn : 1;
    let per = (userInfo.value.experience - maxn) / divisor / levelListLen.length;
  }
  async function getlevelList(page = 1, limit = 8) {
    state.loadStatus = 'loading';
    let { data } = await getlevelExpList({
      limit,
      page,
    });

    let list = _.concat(state.pagination.data, data.list);
    state.pagination = {
      ...data,
      data: list,
    };
    if (state.pagination.page < state.pagination.totalPage) {
      state.loadStatus = 'more';
    } else {
      state.loadStatus = 'noMore';
    }
  }
  // 加载更多
  function loadmore() {
    if (state.loadStatus !== 'noMore') {
      getlevelList(state.pagination.page + 1);
    }
  }
</script>

<style lang="scss">
  .memberVip {
    .bg {
      background-color: #fff;

      .header {
        background-image: url('');
        background-repeat: no-repeat;
        background-size: 100% 100%;
        width: 100%;
        height: 380rpx;
        background-color: #fff;

        .picTxt {
          padding: 28rpx 39rpx;

          .pictrue {
            width: 70rpx;
            height: 70rpx;
            border-radius: 50%;

            image {
              width: 100%;
              height: 100%;
              border-radius: 50%;
            }
          }

          .text {
            color: #fae2c1;
            margin-left: 23rpx;

            .name {
              max-width: 385rpx;
            }

            .vip {
              padding: 6rpx 18rpx;
              border: 1px solid rgba(250, 226, 193, 1);
              border-radius: 20rpx;
              font-size: 18rpx;
              margin-left: 15rpx;
              display: flex;
              align-items: center;

              image {
                width: 20rpx;
                height: 20rpx;
                border-radius: 50%;
                margin-right: 8rpx;
              }
            }
          }
        }
      }

      .experience {
        background-image: url('');
        background-repeat: no-repeat;
        background-size: 100% 100%;
        width: 690rpx;
        height: 360rpx;
        margin: -250rpx auto 0 auto;
        border-radius: 23rpx;
        padding: 22rpx 27rpx;
        box-sizing: border-box;

        .title {
          font-size: 24rpx;
          color: #ae8b4a;
        }

        .num {
          font-size: 60rpx;
          color: #775c29;
          margin-top: 6rpx;
        }

        .axis {
          margin: 10rpx 0 15rpx 0;
          overflow: hidden;

          .bar {
            width: 630rpx;

            .spotw {
              width: 96rpx;
            }

            .barCon {
              width: 100%;
              height: 3rpx;
              background: #d7bd89;
              border-radius: 2rpx;

              .solidBar {
                width: 0;
                height: 100%;
                background: #775c29;
                border-radius: 2rpx;
                transition: width 0.6s ease;
              }
            }

            .spot {
              width: 8rpx;
              height: 8rpx;
              background: #d7bd89;
              border-radius: 50%;
              margin-top: -5rpx;

              &.past {
                background: #775c29;
              }

              &.on {
                background: #775c29;
                box-shadow: 0rpx 0rpx 8rpx #000;
              }
            }
          }

          .numList {
            font-size: 26rpx;
            color: #d7bd89;
            margin-top: 14rpx;

            .item {
              width: 96rpx;
              text-align: center;

              &.past {
                color: #775c29;
              }
            }
          }
        }

        .vipList {
          .item {
            width: 20%;
            text-align: center;

            .pictrue {
              width: 70rpx;
              height: 70rpx;
              margin: 0 auto;

              image {
                width: 100%;
                height: 100%;
              }
            }

            .name {
              font-size: 24rpx;
              color: #403d4e;
              margin-top: 18rpx;
            }
          }
        }
      }

      .module {
        padding: 40rpx 30rpx 0 30rpx;

        .gainList {
          margin-top: 10rpx;

          .item {
            height: 130rpx;
            position: relative;

            .picTxt {
              .pictrue {
                width: 70rpx;
                height: 70rpx;
                border-radius: 50%;
                background: linear-gradient(
                  -45deg,
                  rgba(249, 119, 107, 1) 0%,
                  rgba(255, 147, 137, 1) 100%
                );
                text-align: center;
                line-height: 70rpx;
                color: #fff;

                &.on {
                  background: linear-gradient(
                    -45deg,
                    rgba(254, 160, 96, 1) 0%,
                    rgba(255, 204, 170, 1) 100%
                  );
                }

                &.on2 {
                  background: linear-gradient(
                    -45deg,
                    rgba(157, 208, 116, 1) 0%,
                    rgba(161, 214, 124, 1) 100%
                  );
                }
              }

              .text {
                margin-left: 30rpx;
                width: 400rpx;

                .name {
                  font-size: 30rpx;
                  color: #282828;
                }

                .info {
                  font-size: 24rpx;
                  color: #999999;
                  margin-top: 6rpx;
                }
              }
            }

            .button {
              width: 140rpx;
              height: 50rpx;
              background: linear-gradient(
                -90deg,
                rgba(231, 182, 103, 1) 0%,
                rgba(255, 234, 181, 1) 100%
              );
              border-radius: 25rpx;
              text-align: center;
              line-height: 50rpx;
              font-size: 26rpx;
              color: #8d5306;
            }

            & ~ .item {
              &::after {
                position: absolute;
                content: ' ';
                width: 720rpx;
                height: 1rpx;
                background: rgba(245, 245, 245, 1);
                top: 0;
                left: 0;
              }
            }
          }
        }
      }
    }

    .public_title {
      color: #282828;
      font-size: 30rpx;

      .icons {
        width: 6rpx;
        height: 28rpx;
        background: rgba(230, 192, 131, 1);
        margin-right: 10rpx;
      }
    }

    .detailed {
      padding: 30rpx 30rpx 0 30rpx;
      margin-top: 15rpx;
      background-color: #fff;

      .list {
        margin-top: 15rpx;

        .item {
          height: 122rpx;
          border-bottom: 1px solid #eeeeee;

          .text {
            .name {
              font-size: 28rpx;
              color: #282828;
            }

            .data {
              color: #999;
              font-size: 24rpx;
            }
          }

          .num {
            font-size: 32rpx;
            color: $theme-color;
          }

          .on {
            color: #16ac57;
          }
        }
      }
    }
  }
</style>
